<!DOCTYPE html>
<html lang="en">
<head>
    <title>登录页面</title>
    <meta charset="utf-8">
    <meta content="webkit" name="renderer">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    <link href="../static/layui/css/layui.css" rel="stylesheet"/>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style type="text/css">
        .container {
            width: 420px;
            height: 250px;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            padding: 20px;
            border-radius: 12px;
            background-color: #fff;
            box-shadow: 0 3px 18px rgba(100, 0, 0, .5);
            font-size: 16px;
        }

        .layui-input {
            border-radius: 5px;
            width: 300px;
            height: 40px;
            font-size: 15px;
        }

        .layui-form-item {
            margin-left: -20px;
        }

        #logoid {
            margin-top: -16px;
            padding-left: 150px;
            padding-bottom: 15px;
        }

        .layui-btn {
            margin-left: -50px;
            border-radius: 5px;
            width: 350px;
            height: 40px;
            font-size: 15px;
        }

        a:hover {
            text-decoration: underline;
        }

    </style>
</head>
<body>
<form action="" class="layui-form" id="form">
    <div class="container">
        <div class="layui-form-mid layui-word-aux" style="left:42%">
            <i class="layui-icon layui-icon-username" style="font-size:70px;"></i>
            <p style="font-size:14px">&nbsp;&nbsp;系统登录</p>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">账 &nbsp;&nbsp;号</label>
            <div class="layui-input-block">
                <input autocomplete="off" class="layui-input" lay-verify="required" name="username"
                       placeholder="请输入账号" type="text">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密 &nbsp;&nbsp;码</label>
            <div class="layui-input-block">
                <input autocomplete="off" class="layui-input" lay-verify="required" name="password"
                       placeholder="请输入密码" type="password">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-filter="formDemo" lay-submit type="button">登录</button>
            </div>
        </div>
    </div>
</form>
<script src="../static/layui/layui.js"></script>
<script>
    layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate;


        //监听提交
        form.on('submit(formDemo)', function (data) {
            $.ajax({
                url: 'http://localhost:8972/yonghu/login',
                type: "GET",
                data: data.field,
                dataType: 'text',
                success: function (res) {
                    //String转换json
                    var jsonObj = JSON.parse(res);
                    console.info(jsonObj);
                    //console.info(jsonObj[0].status)
                    if (jsonObj.status == 0) {
                        console.log(res);
                        layer.msg("登录成功");
                        console.info("成功");
                        parent.location.reload();
                        location.href = 'http://localhost:8972';
                    } else if (jsonObj.status == 2) {
                        layer.msg("缺少必要数据");
                        console.info("失败");
                    } else {
                        layer.msg("账户或密码不正确");
                        console.info("失败");
                    }
                    $("form")[0].reset();
                    form.render();
                },
                error: function (data) {
                    console.info(data);
                    layer.msg("网络错误");
                    $("form")[0].reset();
                    form.render();
                }
            });
        });

    });
</script>
</body>
</html>